<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.text_box {
			width: 400px;
			height: 400px;
			margin: 0 auto;
			border: 1px solid #909090;
		}
		
		textarea {
			resize: none;
		}
	</style>

	<body>
		<div class="text_box">
			<textarea name="" rows="20" cols="60" maxlength="5"></textarea><br />
			<p>剩余字数：<span></span></p>
		</div>
		<script type="text/javascript">
			var texTarea=document.querySelector("textarea");
			  texTarea.addEventListener("change",function(){
			  	  if(texTarea.value.length>texTarea.maxLength){
			  	  	   texTarea.value.splice(-1,1)
			  	  }
			  })
		</script>
	</body>

</html>